<template>
  <el-dialog
    title="历史工单"
    :visible.sync="dialogVisible"
    custom-class="custom-dialog"
    width="50%"
    :before-close="handleClose"
  >
    <el-table
      border
      size="small"
      :data="newArr"
      height="300px"
      style="width: 100%"
    >
      <!-- <el-table-column type="selection" width="60" /> -->
      <!-- <el-table-column
        prop="overFlag"
        label="状态"
        show-overflow-tooltip
        width="80"
      >
        <template slot-scope="scope">
          <div class="overFlagBox1">
            <img
              src="@/assets/images/images1/icon1.png"
              v-if="scope.row.overFlag == '已超期'"
              class="overFlagBox1_Img"
            />
            <img
              src="@/assets/images/images1/icon3.png"
              v-if="scope.row.overFlag == '未超期'"
              class="overFlagBox1_Img"
            />
            <img
              src="@/assets/images/images1/icon2.png"
              v-if="scope.row.overFlag == '即将超期'"
              class="overFlagBox1_Img"
            />
            {{ scope.row.overFlag }}
          </div>
        </template>
      </el-table-column> -->
      <el-table-column prop="code" label="事件id" show-overflow-tooltip />
      <el-table-column prop="title" label="工单标题" show-overflow-tooltip />
      <el-table-column prop="type" label="工单类型" show-overflow-tooltip />
      <el-table-column
        prop="sourceName"
        label="来源名称"
        show-overflow-tooltip
      />
      <el-table-column
        prop="categoryCompleteName"
        label="权责清单"
        show-overflow-tooltip
      />
      <el-table-column
        prop="addressDetailedStandard"
        label="地址"
        show-overflow-tooltip
      />
    </el-table>

    <!-- {{toSonData}} -->
  </el-dialog>
</template>
<script>
import { parseTime } from "@/utils/index";
export default {
  data() {
    return {
      tableData: [
        {
          key1: 1,
          key2: 1,
          key3: "崇庆街道",
          key4: "崇州会治理【800053】号",
          key5: "2021-03-02  12：23：00",
          key6: "河道管理",
          key7: "水污染",
        },
      ],

      newArr: [],
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    toSonData: {
      type: Array,
      default: [],
    },
  },
  methods: {
    handleClose() {
      this.$emit("closeDialog");
      //   this.clearData();
    },
  },
  watch: {
    toSonData() {
      this.newArr = [];
      console.log(this.toSonData);
      this.toSonData.forEach((item) => {
        if (item.overFlag == 0) {
          item.overFlag = "未超期";
        } else if (item.overFlag == 1) {
          item.overFlag = "已超期";
        } else {
          let time = Date.parse(new Date()) / 1000;
          if (time > item.planCompletionTime) {
            item.overFlag = "已超期";
          } else if (time * 0.8 > item.planCompletionTime) {
            item.overFlag = "即将超期";
          } else {
            item.overFlag = "未超期";
          }
        }

        this.newArr.push({
          title: item.title,
          addressStreetName: item.addressStreetName,
          reportTime: item.addressDetailedUser,
          categoryCompleteName: item.categoryName,
          type: item.type,
          code: item.processEngine,
          overFlag: item.overFlag,
          sourceName: item.sourceName,
          addressDetailedStandard: item.addressDetailedStandard,
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.overFlagBox1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.overFlagBox1 .overFlagBox1_Img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
</style>